﻿<div class="control-group">
    <cms-field>
        <label class="control-label" for="{{vm.modelName}}">{{vm.title}}:</label>
        <div class="controls">
            <input type="hidden"
                   id="{{vm.modelName}}"
                   name="{{vm.modelName}}"
                   ng-model="vm.model"
                   ng-change="vm.onChange()" />

            <cms-table-container cms-loading="vm.gridLoadState.isLoading">
                <table>
                    <thead>
                        <tr>
                            <th>Document</th>
                            <th cms-table-column-actions
                                ng-if="vm.formScope.editMode && !vm.readonly">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-if="!vm.gridData.length">
                            <td colspan="100" class="empty">None</td>
                        </tr>
                        <tr ng-repeat="document in vm.gridData track by $index"
                            ui-draggable="vm.formScope.editMode"
                            data-drag="document"
                            data-drag-channel="document-asset-{{vm.modelName}}"
                            ui-on-drop="vm.onDrop($index, $data)"
                            data-drop-channel="document-asset-{{vm.modelName}}">
                            <td>
                                <cms-document-asset cms-document="document"></cms-document-asset>
                            </td>
                            <td cms-table-column-actions ng-if="vm.formScope.editMode && !vm.readonly">
                                <cms-button-icon cms-href="{{vm.urlLibrary.documentDetails(document.documentAssetId)}}"
                                                 cms-external="true"
                                                 cms-title="Edit document"
                                                 cms-icon="external-link">
                                </cms-button-icon>
                                <cms-button-icon cms-title="Remove"
                                                 cms-icon="trash-o"
                                                 ng-click="vm.remove(document)">
                                </cms-button-icon>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <cms-table-actions>
                    <a href="" class="btn-icon" title="Add"
                       ng-click="vm.showPicker()"
                       ng-if="vm.formScope.editMode && !vm.readonly"
                       ng-disabled="vm.gridLoadState.isLoading || vm.disabled">
                        <i class="fa fa-plus-circle"></i>
                    </a>
                </cms-table-actions>
            </cms-table-container>
            <cms-form-field-validation-summary></cms-form-field-validation-summary>
        </div>
    </cms-field>
    <p class="help-inline" ng-if="vm.description">
        <small>{{vm.description}}</small>
    </p>
</div>